<template>
  <div>
    <div class="head">header</div>
    <div class="container">
      <div class="float">
        <div class="icon">
          <img
            v-for="(item, index) in arr"
            :src="item.src"
            alt=""
            class="icon-img"
            :data-order="index - 2"
            :style="{
              transform:
                'translate3d(' + itemX(index) + 'px, 75px, 10px) scale(0.5)',
              opacity: 0,
            }"
          />
        </div>
        <div class="icon">
          <img
            v-for="(item, index) in arr"
            :src="item.src"
            alt=""
            :data-order="index - 2"
            class="icon-img"
            :style="{
              transform:
                'translate3d(' + itemX(index) + 'px, -75px, 10px) scale(0.5)',
              opacity: 0,
            }"
          />
        </div>
      </div>
    </div>
    <div class="foot">foot</div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const arr = reactive([
  {
    src: require("@/assets/images/vueIcon.png"),
  },
  {
    src: require("@/assets/images/vueIcon.png"),
  },
  {
    src: require("@/assets/images/vueIcon.png"),
  },
  {
    src: require("@/assets/images/vueIcon.png"),
  },
  {
    src: require("@/assets/images/vueIcon.png"),
  },
]);
function animation(e) {
  let container = document.getElementsByClassName("container")[0];
  //   let float = document.getElementsByClassName("float")[0];
  let iconImg = document.getElementsByClassName("icon-img");
  var sTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (sTop > container.offsetTop) {
    for (let i = 0; i < iconImg.length; i++) {
      const element = iconImg[i];
      let order= Math.abs(element.dataset.order);
      if (sTop - container.offsetTop > order) {
        let x = 0;
        let y = 0;
        let scale = 0;
        element.style.transform = `translate3d(${x}px, ${y}px, 10px) scale(${scale})`;
      }
    }
  }
}
function itemX(index) {
  return 112.5 * (2 - index);
}
window.addEventListener("scroll", animation);
</script>
<style lang="scss" scoped>
.head {
  height: 300px;
  background-color: #fff;
}
.container {
  height: 2000px;
  background-color: #000;
  position: relative;
  .float {
    height: 400px;
    background-color: #000;
    position: sticky;
    top: 50px;
    color: #fff;
    padding-top: 100px;
    .icon {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 500px;
      margin: 100px auto;
      .icon-img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.foot {
  height: 200px;
  background-color: #fff;
}
</style>
